<template>
  <div>
    <button v-for="(item, index) in title_arr" :key="index" @click="tap(index)">
      {{ item }}
    </button>
    <ul>
      <li v-for="item in user_list_arr2" :key="item.id" @click="add(item)">
        <img :src="item.img" />
        <p>{{ item.name }}</p>
        <h4>{{ item.price }}</h4>
      </li>
    </ul>
    <table border="1px">
      <thead>
        <tr>
          <th><input type="checkbox" @click="all()" :checked="is">全选</th>
          <th>商品名称</th>
          <th>商品图片</th>
          <th>商品单价</th>
          <th>商品数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in gwc_list_arr" :key="item.id">
          <td><input type="checkbox" :checked="item.is" @click="xuan(item)"></td>
          <td>{{ item.name }}</td>
          <td><img :src="item.img" /></td>
          <td>{{ item.price }}</td>
          <td>
            <button @click="jia(item)">+</button
            ><input type="text" :value="item.num" class="shu"><button
              @click="jian(item)"
            >
              -
            </button>
          </td>
          <td><button @click="del(item.id)">删除</button></td>
        </tr>
      </tbody>
    </table>
    <h1>总价：{{zong}}</h1>
  </div>
</template>

<script>
export default {
  name: "APP",
  data() {
    return {
      is: false,
      title_arr: ["空调", "平板", "冰箱"],
      user_list_arr: [
        {
          pid: 0,
          id: 1,
          name: "格力空调",
          img: "https://img14.360buyimg.com/n7/jfs/t1/298858/11/15527/87251/68576329F0b8a2179/261fcb7e9072daf1.jpg",
          price: 1500,
        },
        {
          pid: 0,
          id: 2,
          name: "小米空调",
          img: "https://img13.360buyimg.com/n7/jfs/t1/293459/29/16808/101573/68558099F67bff19e/29204fd6c10ce08d.jpg",
          price: 2000,
        },
        {
          pid: 0,
          id: 3,
          name: "海尔空调",
          img: "https://img10.360buyimg.com/n7/jfs/t1/305978/33/17384/151471/6870daacF69c16eea/795998dec7f8d40a.jpg",
          price: 2500,
        },
        {
          pid: 1,
          id: 1,
          name: "一加平板",
          img: "https://img13.360buyimg.com/n7/jfs/t1/292730/37/17492/106723/6862690eFfebd5cc2/e2be736e0c325393.jpg",
          price: 2000,
        },
        {
          pid: 1,
          id: 2,
          name: "苹果平板",
          img: "https://img10.360buyimg.com/n7/jfs/t1/299236/11/19108/29150/685ea90aFe1d33c8f/4bc77c67c6037e3d.png",
          price: 3000,
        },
        {
          pid: 1,
          id: 3,
          name: "华为平板",
          img: "https://img14.360buyimg.com/n7/jfs/t1/311589/15/12429/24264/685b8bc6F8d3e0410/de81c2c2101d30fb.jpg",
          price: 1000,
        },
        {
          pid: 2,
          id: 1,
          name: "海尔冰箱",
          img: "https://img10.360buyimg.com/n7/jfs/t1/301586/24/5286/64592/681fe05aF1abfaaa1/96e4466f5d09c374.jpg",
          price: 1000,
        },
        {
          pid: 2,
          id: 2,
          name: "小米冰箱",
          img: "https://img10.360buyimg.com/n7/jfs/t1/299194/15/20119/118454/686f2164Fb22dcfc2/b94036bc381e8dff.jpg",
          price: 3000,
        },
        {
          pid: 2,
          id: 3,
          name: "美的冰箱",
          img: "https://img13.360buyimg.com/n7/jfs/t1/316649/34/15207/153922/686f804aF5b8e9f92/db766fdff372c0e3.jpg",
          price: 2000,
        },
      ],
      user_list_arr2: [
        {
          pid: 0,
          id: 1,
          name: "格力空调",
          img: "https://img14.360buyimg.com/n7/jfs/t1/298858/11/15527/87251/68576329F0b8a2179/261fcb7e9072daf1.jpg",
          price: 1500,
        },
        {
          pid: 0,
          id: 2,
          name: "小米空调",
          img: "https://img13.360buyimg.com/n7/jfs/t1/293459/29/16808/101573/68558099F67bff19e/29204fd6c10ce08d.jpg",
          price: 2000,
        },
        {
          pid: 0,
          id: 3,
          name: "海尔空调",
          img: "https://img10.360buyimg.com/n7/jfs/t1/305978/33/17384/151471/6870daacF69c16eea/795998dec7f8d40a.jpg",
          price: 2500,
        },
      ],
      gwc_list_arr: [],
    };
  },
  methods: {
    // Tap切换
    tap(i) {
      var a = this.user_list_arr.filter((item) => item.pid == i);
      this.user_list_arr2 = a;
    },

    // 添加进购物车
    add(item) {
      this.gwc_list_arr.push({
        id: this.gwc_list_arr.length,
        name: item.name,
        img: item.img,
        price: item.price,
        is: false,
        num: 1,
      });
      console.log(this.gwc_list_arr);
    },

    // 全选反选
    all() {
      this.is = !this.is;
      this.gwc_list_arr.forEach(item => {
        item.is = this.is
      })
    },

    // 加
    jia(i) {
        i.num++
    },

    // 减
    jian(i) {
      if (i.num > 1) {
        i.num--;
      }
    },

    // 删除
    del(id) {
      var a = this.gwc_list_arr.findIndex((item) => item.id == id);
      this.gwc_list_arr.splice(a, 1);
    },

    // 选中
    xuan(i){
        i.is = !i.is
        console.log(i.is);
    }
  },
  computed: {
    zong(){
        let zong = 0;
        this.gwc_list_arr.forEach(item => {
            if(item.is == true){
                zong += item.price * item.num
            }
        })
        return zong
    }
  },
};
</script>
<style scoped>
* {
  list-style: none;
}

li {
  display: inline-block;
  margin-right: 20px;
}

th {
  padding: 5px 20px;
  text-align: center;
}

td {
  padding: 5px 20px;
  text-align: center;
}

td img {
  width: 100px;
  height: 100px;
}

.shu {
  width: 50px;
  height: 16px;
  text-align: center;
}
</style>